<h2>{{character.className}}</h2>
<div class="character-page-holder">
    <div class="character-page">
        <div>
            <div id="attribute-holder" class="character-page-section">
                <h3>Attributes</h3>
                <ul id="attribute-list" class="value-list">
                    <li ng-repeat="obj in attributeArray">
                        <span title="{{obj.description}}">{{obj.name}}</span>
                        <span title="The character's {{obj.name}}">{{obj.value}}</span>
                        <span title="The character's {{obj.name}} modifier">{{obj.bonus}}</span>
                    </li>
                </ul>
            </div>
            <div id="save-bonus-holder" class="character-page-section">
                <h3>Save bonus</h3>
                <ul id="save-bonus-list" class="value-list">
                    <li ng-repeat="obj in saveBonusArray">
                        <span title="{{obj.description}}">{{obj.name}}</span>
                        <span title="The character's {{obj.name}} save bonus">{{obj.value}}</span>
                    </li>
                </ul>
            </div>
            <character-page-animation animation="character.animation"></character-page-animation>
        </div>
        <div>
            <div id="skill-holder" class="character-page-section">
                <h3>Skills</h3>
                <ol id="skill-list" class="value-list">
                    <li ng-repeat="obj in skillArray">
                        <span title="{{obj.description}}">{{obj.name}}</span>
                        <span title="The character's {{obj.name}} skill">{{obj.value}}</span>
                        <span title="The character's {{obj.name}} modifier">{{obj.bonus}}</span>
                    </li>
                </ol>
            </div>
        </div>
        <div>
            <div id="feat-holder" class="character-page-section">
                <h3>Feats</h3>
                <ol id="feat-category-list">
                    <li ng-repeat="featCategory in featCategoryArray | orderBy: 'order'">
                        <h4>{{featCategory.name}}</h4>
                        <ol class="value-list feats">
                            <li ng-repeat="feat in featCategory.feats" id="{{feat.id}}" title="{{feat.display.description}}">
                                <span class="feat-icon-holder"><img ng-src="images/icons/{{feat.display.icon}}" /></span>
                                <span class="feat-name-holder">{{feat.display.name}}</span>
                            </li>
                        </ol>
                    </li>
                </ol>
            </div>
        </div>
        <div>
            <div id="inventory-holder" class="character-page-section">
                <h3>Inventory</h3>
                <character-inventory inventory="character.inventory"></character-inventory>
            </div>
        </div>
    </div>
</div>
<a href="#/town">Back to town</a>